<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字滚动</title>
	
	<!-- 
	function alarmInformation(data) {
	console.log(data)  
	//这里的data是ajax传来的请求数据，通过data.length获取其长度，再根据其长度*(相关list的)高度==，得到show1中的轮播高度，最终显示出要使用的轮播，
	当然这里的高度不能太高，超出mian类的页面部分要隐藏显示，即overflow：hidden; 
	$(".waring-content").append('<div class="show1"></div>')

	// const mlist = ["[CNC#1]主轴负载过大 Error13 13:12:02", "[CNC#2]主轴负载过大 Error13 13:12:02", "[CNC#3]主轴负载过大 Error13 13:12:02"];
	for (let i = 0; i < data.length; i++) {
		// setInterval(
		$(".show1")
			.append(
				'<div class="waring-text" id="waring-text">' +
				data[i].name + '&nbsp;&nbsp;' + data[i].info + '&nbsp;&nbsp;' +
				data[i].errnumber + '&nbsp;&nbsp;' + data[i].errTime +
				'</div>'
			)
	}
	
	$(".waring-content").append('<div class="show2"></div>');
	
	var main = document.getElementsByClassName("waring-content")[0];
	// 这里动态获取main中的高度
	main.style.height = (data.length)*(document.getElementById("waring-text").offsetHeight)+'px';
	// console.log((data.length)*(document.getElementById("waring-text").offsetHeight))
	var show1 = document.getElementsByClassName("show1")[0];
	var show2 = document.getElementsByClassName("show2")[0];
	var timeId;
	show2.innerHTML = show1.innerHTML;
	timeId = setInterval(play, 50);

	function play() {
		if (main.scrollTop >= show1.offsetHeight) {
			main.scrollTop = 0;
		} else {
			main.scrollTop++;
		}
	}
	play();
	main.onmouseover = function() {
		clearInterval(timeId)
	};
	main.onmouseout = function() {
		timeId = setInterval(play, 50);
	};
}
 -->
	<style type="text/css">
		/*代码初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		ul li,ol li{
			list-style-type: none;
		}
		a{
			text-decoration: none;
		}
		/*代码主体*/
		.main{
			width: 300px;
			height: 400px;
			border: 1px solid rgba(0,0,0,0.3);
			margin: 10px auto;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			overflow-y: hidden;
		}
		.show1 li,.show2 li{
			width: 100%;
			height: 100px;
			border-bottom: 1px solid rgba(0,0,0,0.2);
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
			font-size: 26px;
			cursor: pointer;
		}
	</style>
</head>
<body>
<div class="main">
	<ul class="show1">
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
		<li>新闻4</li>
		<li>新闻5</li>
		<li>新闻6</li>
		<li>新闻7</li>
		<li>新闻8</li>
	</ul>
	<ul class="show2">
		
	</ul>
</div>
<script type="text/javascript">
	var main = document.getElementsByClassName("main")[0];
	var show1 = document.getElementsByClassName("show1")[0];
	var show2 = document.getElementsByClassName("show2")[0];
	var timeId;
	show2.innerHTML = show1.innerHTML;
	timeId = setInterval(play,25);
	function play(){
		if (main.scrollTop >= show1.offsetHeight) {
			main.scrollTop=0;
		}else{
			main.scrollTop++;
		}
	}
	play();
	main.onmouseover = function(){
		clearInterval(timeId)
	};
	main.onmouseout = function(){
		timeId = setInterval(play,25);
	};
</script>
</body>
</html>
